<template>
	<view>
		<view class="form-box">
			<u-form ref="uForm" label-width="180rpx" :model="form">
				<u-form-item label="姓名" prop="name" required>
					<u-input v-model="form.name" clearable placeholder="姓名"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" required>
					<u-input v-model="form.phone" type="number" clearable placeholder="手机号"></u-input>
				</u-form-item>
				<view class="blank"></view>
				<u-line class="pt16"></u-line>
				<view class="title">车辆信息</view>
				<u-form-item label="车型" prop="cartype" @click="showCarType = true;" >
					<u-input v-model="form.cartype" disabled disabledColor="#ffffff" placeholder="请选择车型" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="车长" prop="carlen" @click="showCarLen = true;" >
					<u-input v-model="form.carlen" disabled disabledColor="#ffffff" placeholder="请选择车长" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="车牌号" prop="carno">
					<u-input v-model="form.carno" clearable placeholder="填写您的车牌号"></u-input>
				</u-form-item>
				
				<view class="title mt32">收费标准</view>
				<u-form-item label="展会类型" prop="cartype" @click="showType = true;" >
					<u-input v-model="form.type" disabled disabledColor="#ffffff" placeholder="请选择展会类型" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="押金" v-if="form.deposit>0">
					<view class="text">{{form.deposit}}元/次</view>
				</u-form-item>
				<u-form-item label="证件工本费" v-if="form.fee>0">
					<view class="text">{{form.fee}}元</view>
				</u-form-item>
				
				<view class="title"></view>
				<u-form-item label="上传证件" prop="wx">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" accept="image" capture="camera" multiple :maxCount="2">
					</u-upload>
				</u-form-item>
				<view class="t24 c-error">注意：每次开展会的时候，首次提交证件，需在线下展馆提交纸质原件。</view>
				<view class="t24 c-content" @click="goLocation">线下提交原件地址：<text>{{address}}</text><image class="wh28 ml10" src="/static/images/icon/location.png"></image></view>
			</u-form>
		</view>
		<view class="submit-btn mt64">
			<u-button type="success" @click="submit">提交</u-button>
		</view>
		
		<u-action-sheet :show="showType" :actions="actionsType" title="选择展会类型" @close="showType = false" @select="typeSelect">
		</u-action-sheet>
		<u-action-sheet :show="showCarType" :actions="actionsCarType" title="选择车型" @close="showCarType = false" @select="cartypeSelect">
		</u-action-sheet>
		<u-action-sheet :show="showCarLen" :actions="actionsCarLen" title="选择车长" @close="showCarLen = false" @select="carlenSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	const PAY = require('@/common/pay.js')
	export default {
		data() {
			return {
				fileList: [],
				address: "琶洲展馆A馆101展位",
				balance: 0.00,
				latitude: 39.909,
				longitude: 116.39742,
				type: 0,
				showType: false,
				actionsType: [{
						name: '普通展',deposit:100,fee:10,
					},
					{
						name: '广交会',deposit:100,fee:0,
					},
				],
				showCarType: false,
				actionsCarType: [{
						name: '货车',
					},
					{
						name: '三轮车',
					},
					{
						name: '小推车',
					},
				],
				showCarLen: false,
				actionsCarLen: [{
						name: '9.6米',
					},
					{
						name: '7米',
					},
					{
						name: '5米',
					},
				],
				rules: {
					name: [{
						required: true,
						message: '不能为空',
						trigger: ['change', 'blur'],
					},{
						min: 2,
						max: 8,
						message: '长度在2-8个字符之间'
					}],
					phone: [{
						min: 11,
						max: 11,
						type: 'number',
						required: true,
						message: '手机号不正确',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					carno: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},{
						pattern: /^[0-9a-zA-Z]*$/g,
						message: '只能包含字母或数字'
					}],
				},
				form: {
					name: null,
					phone: null,
					carno: null,
					cartype: null,
					carlen: null,
					type: null,deposit: null,fee: null,
				},
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {},
		onShow() {
			this._reqConfig()
			this._reqConfigFee()
		},
		onShareAppMessage() {
			return {
				title: '意见反馈 - ' + this.sysconfigMap.mallName,
				path: '/pages/my/feedback?inviter_id=' + this.uid
			}
		},
		methods: {
			async _reqConfig() {
				// https://www.yuque.com/apifm/nu0f75/udrcag
				const res = await this.$wxapi.config(this.token,'car')
				if (res.code == 0) {
					const arr=JSON.parse(res.data.value);
					if(arr.length>0){
						this.actionsCarType=arr
						this.actionsCarLen=this.actionsCarType[0].len
					}
				}
			},
			async _reqConfigFee() {
				// https://www.yuque.com/apifm/nu0f75/udrcag
				const res = await this.$wxapi.config(this.token,'fee')
				if (res.code == 0) {
					const arr=JSON.parse(res.data.value);
					this.actionsType=arr
					if(arr.length>0){
						this.form.type=this.actionsType[0].name
						this.form.deposit=this.actionsType[0].deposit
						this.form.fee=this.actionsType[0].fee
					}
					
				}
			},
			typeSelect(e) {
				this.form.type=e.name
				this.form.deposit=e.deposit
				this.form.fee=e.fee
			},
			cartypeSelect(e) {
				this.form.cartype = e.name
				this.actionsCarLen= e.len
				// uni.showToast({
				// 	title: this.type+'xx',
				// 	icon: 'success'
				// })
			},
			carlenSelect(e) {
				this.form.carlen = e.name
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				this.fileList = this.fileList.concat(event.file)
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this._submit()
				}).catch(errors => {
					uni.showToast({
						title: '表单请填写完整',
						icon: 'none'
					})
				})
			},
			async _submit() {
				let urls = []
				// 批量上传附件
				if (this.fileList) {
					for (let index = 0; index < this.fileList.length; index++) {
						const pic = this.fileList[index];
						const res = await this.$wxapi.uploadFile2(this.token, pic.url)
						if (res.code == 0) {
							urls.push(res.data.url)
						}
					}
				}
				this.form.urls=urls
				const res = await this.$wxapi.addCard(this.token,this.form)
				if (res.code == 0) {
					uni.showModal({
						showCancel: false,
						title: '成功',
						content: '提交成功',
						confirmText: '知道了',
						success: () => {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			goLocation() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: function () {
						console.log('success');
					}
				});
			},
			
			
		}
	}
</script>
<style scoped lang="scss">
	.form-box {
		padding: 32rpx;
	}
	.title{
	  font-size:28rpx;
	  color:#ccc;
	  padding:32rpx 0;
	}
	.text {
		font-size: 32rpx;
		color: $u-content-color;
	}

	

</style>
